<template>
  <vue-form :state="formstate" ref="form" v-if="showing">
    <validate tag="div" class="weui-cell_item" :custom="{ 'validatorName': validatorName }">
      <div class="weui-cells__title"><span class="err">*</span>姓名</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.contact_name" type="text" required name="contact_name" placeholder=""/>
        </div>
      </div>
      <field-messages name="contact_name" show="$touched">
        <div slot="required" class="err">姓名必填~</div>
        <div slot="validatorName" class="err">姓名格式不对~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validatorPhone': validatorPhone }">
      <div class="weui-cells__title"><span class="err">*</span>联系电话</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.contact_phone" type="text" required maxlength="11" name="contact_phone" placeholder=""/>
        </div>
      </div>
      <field-messages name="contact_phone" show="$touched">
        <div slot="required" class="err">联系电话必填~</div>
        <div slot="validatorPhone" class="err">联系电话格式不对~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validatorEmail': validatorEmail }">
      <div class="weui-cells__title"><span class="err">*</span>电子邮箱</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.contact_email" type="text" required name="contact_email" placeholder=""/>
        </div>
      </div>
      <field-messages name="contact_email" show="$touched">
        <div slot="required" class="err">电子邮箱必填~</div>
        <div slot="validatorEmail" class="err">电子邮箱格式不对~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>微信号</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.contact_weixin" required type="text" name="contact_weixin" placeholder=""/>
        </div>
      </div>
      <field-messages name="contact_weixin" show="$touched">
        <div slot="required" class="err">微信号必填~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title">QQ号</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.contact_qq" type="text" name="contact_qq" placeholder=""/>
        </div>
      </div>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title">支付宝账号</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.cantact_alipay" type="text" name="cantact_alipay" placeholder=""/>
        </div>
      </div>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title">公司职务</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.contact_duties" type="text" name="contact_duties" placeholder=""/>
        </div>
      </div>
    </validate>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" @touchstart.stop.prevent="handleClickSubmit">提交审核</button>
    </div>
  </vue-form>
  <div v-else class="show">
    <div class="weui-flex">姓名：<span>{{ model.contact_name }}</span></div>
    <div class="weui-flex">联系电话：<span>{{ model.contact_phone }}</span></div>
    <div class="weui-flex">电子邮箱：<span>{{ model.contact_email }}</span></div>
    <div class="weui-flex">微信号：<span>{{ model.contact_weixin }}</span></div>
    <div class="weui-flex">联系人QQ：<span>{{ model.contact_qq }}</span></div>
    <div class="weui-flex">支付宝账号：<span>{{ model.cantact_alipay }}</span></div>
    <div class="weui-flex">公司职务：<span>{{ model.contact_duties }}</span></div>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" @touchstart.stop.prevent="showing=!showing">编辑资料</button>
    </div>
  </div>
</template>

<script>
  import { validatePhone, validChinese, validateEmail } from '@/utils/validate'
  import { merchatnContactUpdate } from '@/api/index'
  import { GetMerchantInfo } from '@/api/salesman'
  import { getAgent, getToken, getId } from '@/utils/auth'


  export default {
    name: 'leader',
    data() {
      return {
        showing: false,
        formstate: {},
        model: {
          contact_name: '',
          contact_phone: '',
          contact_duties: '',
          contact_email: '',
          contact_weixin: '',
          cantact_alipay: '',
          contact_qq: ''
        }
      }
    },
    methods: {
      validatorName(v) {
        if (validChinese(v)) {
          return true
        } else {
          return false
        }
      },
      validatorPhone(v) {
        if(validatePhone(v)) {
          return true
        }else {
          return false
        } 
      },
      validatorEmail(v) {
        if(validateEmail(v)) {
          return true
        }else {
          return false
        } 
      },
      handleClickSubmit() {
        if(this.formstate.$invalid) {
         this.$weui.alert('请补全资料')
         return false
        } else {
          this.$loading(true, '正在提交')
          merchatnContactUpdate(this.$route.query.merchant_num, getAgent(), getId(), getToken(), this.model).then(res => {
            if (res.data.errorCode === 0) {
                this.$loading(false)
                this.$toast.success('提交成功')
                this.showing = false
            } else {
              this.$loading(false)
              this.$weui.alert(res.data.errorMsg)
            }
          })
        }
      }
    },
    created() {
      GetMerchantInfo(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.model.contact_name = res.data.result.contact.contact_name
          this.model.contact_phone = res.data.result.contact.contact_phone
          this.model.contact_id_no = res.data.result.contact.contact_id_no
          this.model.contact_duties = res.data.result.contact.contact_duties
          this.model.contact_email = res.data.result.contact.contact_email
          this.model.contact_weixin = res.data.result.contact.contact_weixin
          this.model.cantact_alipay = res.data.result.contact.cantact_alipay
          this.model.contact_qq = res.data.result.contact.contact_qq
        } else {
          this.$weui.alert(res.data.errorMsg)
        }
      })
    }
  }
</script>